<!doctype html>
<html class="test-wait">
<!--
  This test is for crbug.com/1368458 which is a crash where we expected
  up-to-date style&layout when delivering resize observations. We would crash
  if a resize observer in one frame caused a modification in the presence of a
  resize observer in another frame.
-->
<iframe id="iframe" style="border: none;" srcdoc="
  <!doctype html>
  <style>body { margin: 0; }</style>
  <div id='inner_element'>hello</div>
  <script>
    const resizeObserver = new ResizeObserver((entries) => {
      const size = entries[0].borderBoxSize[0].inlineSize;
      const event = new CustomEvent('onIframeResizeObserved', {detail: size});
      parent.document.dispatchEvent(event);
    });
    resizeObserver.observe(inner_element);
  </script>
"></iframe>
<div id="outer_element" style="width: 200px;">world</div>

<script>
  const onInnerElementInitialResize = (event) => {
    // `inner_element` should result in an initial observation of width 300px.
    window.document.removeEventListener(
        'onIframeResizeObserved', onInnerElementInitialResize, false);

    const resizeObserver = new ResizeObserver((entries) => {
      // `outer_element` should result in an initial observation of width 200px.

      // Modify styles so that inner_element is resized.
      iframe.contentDocument.body.style.width = "200px";
    });
    resizeObserver.observe(outer_element);

    const onInnerElementSecondResize = (event) => {
      // `inner_element` should result in a second observation of width 100px.

      // Finish the test.
      document.documentElement.classList.remove('test-wait');
    };
    window.document.addEventListener(
        'onIframeResizeObserved', onInnerElementSecondResize, false);
  };
  window.document.addEventListener(
      'onIframeResizeObserved', onInnerElementInitialResize, false);
</script>
